{{ define "css"}}
    <style type="text/css">
        body {
            background: #e5e5e5;
        }
        .hero.is-success {
            background: #F2F6FA;
        }
        .avatar {
            margin-top: -70px;
            padding-bottom: 20px;
        }
        .avatar img {
            padding: 5px;
            background: #fff;
            border-radius: 50%;
            -webkit-box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
            box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
        }
    </style>
{{ end }}

{{ define "content"}}
    {{/*    https://dansup.github.io/bulma-templates/templates/login.html*/}}
    <section class="hero is-success">
        <div class="hero-body">
            <div class="container">
                <div class="column is-4 is-offset-4">
                    <h3 class="title has-text-grey has-text-centered">登录</h3>
                    <div class="box">
                        {{include "partials/error"}}
                        <form id="app" class="form-signin">
                            <div class="field">
                                <div class="control has-icons-left has-icons-right">
                                    <input name="email" class="input is-medium" id="inputEmail" type="email" placeholder="邮箱地址" v-model="email" autofocus="">
                                    <span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
                                </div>
                                <p class="help is-danger" id="email-tip" style="display: none"></p>
                            </div>

                            <div class="field">
                                <div class="control has-icons-left has-icons-right">
                                    <input name="password" class="input is-medium" id="inputPassword" type="password" placeholder="密码" v-model="password">
                                    <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
                                </div>
                                <p class="help is-danger" id="password-tip" style="display: none"></p>
                            </div>
                            <div class="field">
                                <label class="checkbox">
                                    <input type="checkbox" v-model="rememberMe" value="1" checked="checked">
                                    Remember me
                                </label>
                            </div>
                            <button class="button is-block is-link is-large is-fullwidth loginBtn" @click="doLogin">登录</button>
                        </form>
                    </div>
                    <p class="has-text-grey has-text-centered">
                        <a href="/register">注册</a> &nbsp;·&nbsp;
                        <a href="/password/reset">忘记密码</a> &nbsp;·&nbsp;
                        <a href="/help">需要帮助？</a>
                    </p>
                </div>
                <div class="column is-4 is-offset-5">
                    <a class="button is-gray" href="/login/oauth/github"><i class="fab fa-github"></i>&nbsp;使用Github登录</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}

{{ define "js"}}
    <script type="text/javascript">
        // The following code is based off a toggle menu by @Bradcomp
        // source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
        // (function() {
        //     var burger = document.querySelector('.burger');
        //     var menu = document.querySelector('#'+burger.dataset.target);
        //     burger.addEventListener('click', function() {
        //         burger.classList.toggle('is-active');
        //         menu.classList.toggle('is-active');
        //     });
        // })();

        var app = new Vue({
            el: '#app',
            data: {
                emailMsg: '',
                passwordMsg: '',
                email: '',
                password: '',
                rememberMe: 0,
            },
            delimiters: ['${', '}'],
            methods: {
                doLogin: function (e) {
                    e.preventDefault();
                    if (!this.email) {
                        $("#inputEmail").addClass("is-danger");
                        $("#email-tip").text("Email为空").show();
                        return false;
                    } else if (!this.validEmail(this.email)) {
                        $("#inputEmail").addClass("is-danger");
                        $("#email-tip").text("Email填写有误").show();
                        return false;
                    }

                    if (!this.password) {
                        $("#inputPassword").addClass("is-danger");
                        $("#password-tip").text("密码不能为空").show();
                        return false;
                    }

                    $("#inputPassword").removeClass("is-danger").addClass("is-success");
                    $("#inputEmail").removeClass("is-danger").addClass("is-success");
                    // $(".loginBtn").button("loading");

                    var bodyFormData = new FormData();
                    rememberMe = this.rememberMe === true ? 1 : 0;
                    bodyFormData.set('email', this.email);
                    bodyFormData.set('password', this.password);
                    bodyFormData.set('remember_me', rememberMe);

                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
                    this.$http.post("/login", bodyFormData, config).then((response) => {
                        console.log(response);
                        if (response.data.code === 0) {
                            $("#inputEmail").removeClass("is-danger");
                            $("#inputPassword").removeClass("is-danger");
                            window.location.href = "/";
                            return true;
                        } else {
                            alert(response.data.message);
                            return false;
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                },
                validEmail: function (email) {
                    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    return re.test(email);
                }
            }
        })
    </script>
{{ end }}